import { expenseBillExport, expenseBillList } from "@/services/chargingManage";
import { formatMessage } from 'umi-plugin-react/locale';
import { Button, Card, DatePicker, Form, Icon, Input, message, Table, Tooltip } from "antd";
import moment from "moment";
import React from "react";
import BillModal from "./billModal";
import UserSession from "@/UserSession";

class ExpenseBill extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      list:[],
      total:false,
      loading:false,
      current:1,
      size:10,
      timeList:null,
      selectedRowKeys:[]
    }
  }

  componentDidMount(){
    if(this.props.onRef){
      this.props.onRef(this)
    }
    if(this.props.location && this.props.location.pathname && (this.props.location.pathname.indexOf("expenseBill") != -1 || this.props.location.pathname.indexOf("mineExpenseBill") != -1)){
      this.getList()
    }
  }

  getDetail = tenantId => {
    this.getList(tenantId)
  }

  getList = tenantId => {
    this.setState({loading:true},async () => {
      const { current,size } = this.state;
      const info = this.props.form.getFieldsValue()
      const isAdmin = UserSession.getCurrentUser().tenantId == 1 
      let billFlag = null
      if(this.props.location && this.props.location.pathname && this.props.location.pathname.indexOf("mineExpenseBill") != -1){
        billFlag = 0
      }else if(!isAdmin){
        billFlag = 1
      }
      const res = await expenseBillList({current,size,search:info.search,
        startDate:info.time && info.time[0] ? moment(info.time[0]).format("YYYY-MM-DD") : '',
        endDate:info.time && info.time[1] ? moment(info.time[1]).format("YYYY-MM-DD") : '',
        tenantId,
        applicationId:UserSession.getCurrentUser().applicationId,
        billFlag
      })
      this.setState({
        list:res.records,
        total:res.total,
        loading:false
      })
    })
  }
  
  doSearch = (current,size) => {
    this.setState({current,size},() => {
      this.getList()
    })
  }

  onSelectChange = selectedRowKeys => {
    this.setState({selectedRowKeys})
  }

  openModal = (id,current) => {
    this.BillModal.initModal(id,current)
  }

  doDownload = async () => {
    const res = await expenseBillExport({id:this.state.selectedRowKeys[0]})
  }

  render(){
    const { current,size,list,total,loading,timeList,selectedRowKeys } = this.state;
    const { form:{getFieldDecorator},step,tenantId,location } = this.props
    const isAdmin = UserSession.getCurrentUser().tenantId == 1 
    const columns = [
      {
        title:formatMessage({ id: 'chargingManage.expenseBill.serialNumber' }),
        dataIndex:"index",
        width:80,
        render:(text,row,index) => {
          return (current - 1) * size + (index + 1)
        }
      },
      {
        title:formatMessage({ id: 'chargingManage.expenseBill.settlementParty' }),
        dataIndex:"enterpriseName",
        width:100
      },
      {
        title:formatMessage({ id: 'chargingManage.expenseBill.year' }),
        dataIndex:"year",
        width:100,
        render:(text,row) => {
          return row.statisticsTime ? moment(row.statisticsTime).format("YYYY") : ''
        }
      },
      {
        title:formatMessage({ id: 'chargingManage.expenseBill.month' }),
        dataIndex:"month",
        width:100,
        render:(text,row) => {
          return row.statisticsTime ? moment(row.statisticsTime).format("MM") : ''
        }
      },
      {
        title:formatMessage({ id: 'chargingManage.expenseBill.paymentRecord' }),
        dataIndex:"payPrice",
        width:100
      },
      {
        title:formatMessage({ id: 'chargingManage.expenseBill.settlementAmount' }),
        dataIndex:"realAllPrice",
        width:100
      },
      {
        title:formatMessage({ id: 'chargingManage.expenseBill.bill' }),
        dataIndex:"bill",
        width:100,
        render:(text,row) => {
          return <Button type="link" size="small" onClick={() => this.openModal(row.id,'2')}>{formatMessage({ id: 'chargingManage.expenseBill.view' })}</Button>
        }
      },
      {
        title:formatMessage({ id: 'chargingManage.expenseBill.usageDetails' }),
        dataIndex:"isLock",
        width:100,
        render:(text,row) => {
          return <Button type="link" size="small" onClick={() => this.openModal(row.id,'0')}>{formatMessage({ id: 'chargingManage.expenseBill.view' })}</Button>
        }
      },
      
    ]

    return (
      <Card bordered={false} style={{minHeight:"100%",display:step == 3 || location ? 'block' : 'none'}} bodyStyle={{padding:step == 3 ? 0 : 24}}>
        <div className="topOptionBox">
          <Form layout="inline">
            <Form.Item>
              {getFieldDecorator("time")(
                <DatePicker.RangePicker />
              )}
            </Form.Item>
            <Form.Item>
              {getFieldDecorator("search")(
                <Input.Search placeholder={formatMessage({ id: 'chargingManage.expenseBill.searchSettlementParty' })} onSearch={() => this.doSearch(1,size)} />
              )}
            </Form.Item>
            <Form.Item><Button type="primary" onClick={() => this.doSearch(1,size)}>{formatMessage({ id: 'chargingManage.expenseBill.query' })}</Button></Form.Item>
            <Form.Item>
              <Tooltip title={<div>
                {formatMessage({ id: 'chargingManage.expenseBill.settlementRules' })}<br />
                {formatMessage({ id: 'chargingManage.expenseBill.settlementCycle' })}<br />
                {formatMessage({ id: 'chargingManage.expenseBill.settlementPartyDetail' })}<br />
                {formatMessage({ id: 'chargingManage.expenseBill.packageDetail' })}<br />
                {formatMessage({ id: 'chargingManage.expenseBill.effectiveness' })}<br />
                {formatMessage({ id: 'chargingManage.expenseBill.discountCheck' })}<br />
                {formatMessage({ id: 'chargingManage.expenseBill.settlementCharging' })}<br />
                {formatMessage({ id: 'chargingManage.expenseBill.standardPricing' })}<br />
                {formatMessage({ id: 'chargingManage.expenseBill.packageFixedPrice' })}<br />
                {formatMessage({ id: 'chargingManage.expenseBill.overflowPricing' })}<br />
                {formatMessage({ id: 'chargingManage.expenseBill.actualTotalCost' })}<br />
                {formatMessage({ id: 'chargingManage.expenseBill.payableTotalCost' })}<br />
                </div>}><Icon type="question-circle" style={{marginLeft:10,cursor:"pointer"}} />
              </Tooltip>
            </Form.Item>
          </Form>
          <Button type="primary" disabled={selectedRowKeys.length != 1} onClick={this.doDownload}>{formatMessage({ id: 'chargingManage.expenseBill.downloadUsageList' })}</Button>
        </div>

        <Table 
          columns={!isAdmin ? columns : [...columns,{
            title:"开票记录",
            dataIndex:"records",
            width:100,
            render:(text,row) => {
              return <Button type="link" size="small" onClick={() => this.openModal(row.id,'3')}>查看</Button>
            }
          },
          {
            title:"标准计费",
            dataIndex:"signPrice",
            width:100,
            render:(text,row) => {
              return <Button type="link" size="small" onClick={() => this.openModal(row.id,'1')}>查看</Button>
            }
          },]}
          dataSource={list}
          loading={loading}
          rowKey={'id'}
          scroll={{x:"auto"}}
          pagination={{
            current,
            pageSize:size,
            showQuickJumper:true,
            onChange:this.doSearch,
            total
          }}
          rowSelection={{
            selectedRowKeys,
            onChange: this.onSelectChange
          }}
        />

        <BillModal onRef={ref => this.BillModal = ref} />
      </Card>
    )
  }
}

export default Form.create()(ExpenseBill)